/******************* 公共变量 *******************/
var userSelf = core.ls('userSelf', 'o'),		// 存储用户信息，userId、userName，image字段
	userOther = core.ls('userOther', 'o'),		// 存储用户信息，userId、userName，image字段
	userOtherImage = core.ls('userOtherImage', 's'),
	faId = core.getUrlData('fa_id'),
	shouId = core.getUrlData('shou_id'),
	// emojis,
	$emojis = $('html body .wrap .activity-chat .emojis-window'),
	// $emoji,
	$emojiBtn = $('html body .chat-footer div span'),
	$chat = $('html body .wrap .activity-chat .chat'),
	$footer = $('html body .chat-footer'),
	$input = $('html body .chat-footer div input'),
	footerHeight = $footer.height(),
	emojisHeight = $emojis.height(),
	isFocus= false,
	footerEmojisHeight = footerHeight + emojisHeight,
	notConHeight = $window.height() - (headerTitleHeight + footerHeight + emojisHeight),
	getRong = false;

$chat.css('minHeight', winHeight - (9.2 * rem));

common.beforeBack = function () {
	core.lsDel('userSelf', 'remove');
	core.lsDel('userOther', 'remove');
}

function getData(num) {
	ajax.load({
		url: userInfoUrl,
		type: 'post',
		// data: {user_id: userId},
		callback: function (data) {
			console.log(data)

			userSelf = {};
			userSelf.id = shouId;
			// userSelf.name = data.image.wo.wo_name;
			userSelf.image = data.list.photo_id;
			userOther = {};
			userOther.id = faId;
			// userOther.name =  data.image.ta.ta_name;
			userOther.image =  userOtherImage;
			vm.userSelf = userSelf;
			vm.userOther = userOther;
			$.ajax({
				url: msgInfoUrl,
				type: 'post',
				data: {
					fa_id: faId,
					page_no: num
					// user_id: userId
				},
				success: function(data) {
					console.log(data)
					vm.is_friend = data.is_friend;
					msgTime = Number(data.last_time) * 1000;
					// if (num == 1) {
					// }
					// ajax.cycle({
					// 	list: {
					// 		ele: 'html body .wrap .activity-chat .chat',
					// 		eleFun: function (data) {
					// 			return '<div class="msg-con">' + 
					// 				'<h3>' + data.add_time + '</h3>' + 
					// 				'<div class="' + ((data.is_zuoyou == 'wo') ? 'self' : 'other') + ' clearfix">' + 
					// 					'<img src="' + ((data.is_zuoyou == 'wo') ? userSelf.image : userOther.image) + '" alt="" title="">' + 
					// 					'<div class="con">' + 
					// 						'<p>' + replaceEm(data.content) + '</p>' + 
					// 						((data.url != 0) ? '<a href="' + data.url + '" title="">点击查看</a>' : '') + 
					// 					'</div>' + 
					// 				'</div>' + 
					// 			'</div>';
					// 		}
					// 	}
					// }, data);
					
					if (data.list) {
						vm.isShow = true;
						if (faId != 0) {
							for (var i = 0; i < data.list.length; i++) {
								console.log(data.list[i].content)
								data.list[i].content = decodeURIComponent(data.list[i].content);
							}
						}
						vm.list = data.list.concat(vm.list);
						vm.loadingJudge = false;
						vm.num++;
						getRong = true;
					} else {
						vm.loadingHint = 2;
						vm.loadJudge = false;
						setTimeout(function () {
							vm.loadingHint = 0;
						}, 1000);
					}
				}
			});
		}
	});
}

var vm = new Vue({
	el: '.wrap',
	data: {
		faId: faId,
		shouId: shouId,
		list: [],
		num: 1,
		is_friend: '',
		loadingHint: 1,
		loadJudge: true,
		loadingJudge: false,
		userSelf: null,
		userOther: null,
		isLoading: false,
		isShow: false,
		// emojiArr: ["%F0%9F%98%80","%F0%9F%98%AC","%F0%9F%98%81","%F0%9F%98%82","%F0%9F%98%83","%F0%9F%98%84","%F0%9F%98%85","%F0%9F%98%86","%F0%9F%98%87","%F0%9F%98%89","%F0%9F%98%8A","%F0%9F%99%82","%F0%9F%99%83","%E2%98%BA%EF%B8%8F","%F0%9F%98%8B","%F0%9F%98%8C","%F0%9F%98%8D","%F0%9F%98%98","%F0%9F%98%97","%F0%9F%98%99","%F0%9F%98%9A","%F0%9F%98%9C","%F0%9F%98%9D","%F0%9F%98%9B","%F0%9F%A4%91","%F0%9F%A4%93","%F0%9F%98%8E","%F0%9F%A4%97","%F0%9F%98%8F","%F0%9F%98%B6","%F0%9F%98%90","%F0%9F%98%91","%F0%9F%98%92","%F0%9F%99%84","%F0%9F%A4%94","%F0%9F%98%B3","%F0%9F%98%9E","%F0%9F%98%9F","%F0%9F%98%A0","%F0%9F%98%A1","%F0%9F%98%94","%F0%9F%98%95","%F0%9F%99%81","%E2%98%B9%EF%B8%8F","%F0%9F%98%A3","%F0%9F%98%96","%F0%9F%98%AB","%F0%9F%98%A9","%F0%9F%98%A4","%F0%9F%98%AE","%F0%9F%98%B1","%F0%9F%98%A8","%F0%9F%98%B0","%F0%9F%98%AF","%F0%9F%98%A6","%F0%9F%98%A7","%F0%9F%98%A2","%F0%9F%98%A5","%F0%9F%98%AA","%F0%9F%98%93","%F0%9F%98%AD","%F0%9F%98%B5","%F0%9F%98%B2","%F0%9F%A4%90","%F0%9F%98%B7","%F0%9F%A4%92","%F0%9F%A4%95","%F0%9F%98%B4","%F0%9F%92%A4","%F0%9F%92%A9","%F0%9F%98%88","%F0%9F%91%BF","%F0%9F%91%B9","%F0%9F%91%BA","%F0%9F%92%80","%F0%9F%91%BB","%F0%9F%91%BD","%F0%9F%A4%96","%F0%9F%98%BA","%F0%9F%98%B8","%F0%9F%98%B9","%F0%9F%98%BB","%F0%9F%98%BC","%F0%9F%98%BD","%F0%9F%99%80","%F0%9F%98%BF","%F0%9F%98%BE","%F0%9F%99%8C","%F0%9F%91%8F","%F0%9F%91%8B","%F0%9F%91%8D","%F0%9F%91%8E","%F0%9F%91%8A","%E2%9C%8A","%E2%9C%8C%EF%B8%8F","%F0%9F%91%8C","%E2%9C%8B","%F0%9F%91%90","%F0%9F%92%AA","%F0%9F%99%8F","%E2%98%9D%EF%B8%8F","%F0%9F%91%86","%F0%9F%91%87","%F0%9F%91%88","%F0%9F%91%89","%F0%9F%96%95","%F0%9F%96%90","%F0%9F%A4%98","%F0%9F%96%96","%E2%9C%8D","%F0%9F%92%85","%F0%9F%91%84","%F0%9F%91%85","%F0%9F%91%82","%F0%9F%91%83","%F0%9F%91%81","%F0%9F%91%80","%F0%9F%91%A4","%F0%9F%91%A5","%F0%9F%97%A3","%F0%9F%91%B6","%F0%9F%91%A6","%F0%9F%91%A7","%F0%9F%91%A8","%F0%9F%91%A9","%F0%9F%91%B1","%F0%9F%91%B4","%F0%9F%91%B5","%F0%9F%91%B2","%F0%9F%91%B3","%F0%9F%91%AE","%F0%9F%91%B7","%F0%9F%92%82","%F0%9F%95%B5","%F0%9F%8E%85","%F0%9F%91%BC","%F0%9F%91%B8","%F0%9F%91%B0","%F0%9F%9A%B6","%F0%9F%8F%83","%F0%9F%92%83","%F0%9F%91%AF","%F0%9F%91%AB","%F0%9F%91%AC","%F0%9F%91%AD","%F0%9F%99%87","%F0%9F%92%81","%F0%9F%99%85","%F0%9F%99%86","%F0%9F%99%8B","%F0%9F%99%8E","%F0%9F%99%8D","%F0%9F%92%87","%F0%9F%92%86","%F0%9F%92%91","%F0%9F%91%A9%E2%80%8D%E2%9D%A4%EF%B8%8F%E2%80%8D%F0%9F%91%A9","%F0%9F%91%A8%E2%80%8D%E2%9D%A4%EF%B8%8F%E2%80%8D%F0%9F%91%A8","%F0%9F%92%8F","%F0%9F%91%A9%E2%80%8D%E2%9D%A4%EF%B8%8F%E2%80%8D%F0%9F%92%8B%E2%80%8D%F0%9F%91%A9","%F0%9F%91%A8%E2%80%8D%E2%9D%A4%EF%B8%8F%E2%80%8D%F0%9F%92%8B%E2%80%8D%F0%9F%91%A8","%F0%9F%91%AA","%F0%9F%91%A8%E2%80%8D%F0%9F%91%A9%E2%80%8D%F0%9F%91%A7","%F0%9F%91%A8%E2%80%8D%F0%9F%91%A9%E2%80%8D%F0%9F%91%A7%E2%80%8D%F0%9F%91%A6","%F0%9F%91%A8%E2%80%8D%F0%9F%91%A9%E2%80%8D%F0%9F%91%A6%E2%80%8D%F0%9F%91%A6","%F0%9F%91%A8%E2%80%8D%F0%9F%91%A9%E2%80%8D%F0%9F%91%A7%E2%80%8D%F0%9F%91%A7","%F0%9F%91%A9%E2%80%8D%F0%9F%91%A9%E2%80%8D%F0%9F%91%A6","%F0%9F%91%A9%E2%80%8D%F0%9F%91%A9%E2%80%8D%F0%9F%91%A7","%F0%9F%91%A9%E2%80%8D%F0%9F%91%A9%E2%80%8D%F0%9F%91%A7%E2%80%8D%F0%9F%91%A6","%F0%9F%91%A9%E2%80%8D%F0%9F%91%A9%E2%80%8D%F0%9F%91%A6%E2%80%8D%F0%9F%91%A6","%F0%9F%91%A9%E2%80%8D%F0%9F%91%A9%E2%80%8D%F0%9F%91%A7%E2%80%8D%F0%9F%91%A7","%F0%9F%91%A8%E2%80%8D%F0%9F%91%A8%E2%80%8D%F0%9F%91%A6","%F0%9F%91%A8%E2%80%8D%F0%9F%91%A8%E2%80%8D%F0%9F%91%A7","%F0%9F%91%A8%E2%80%8D%F0%9F%91%A8%E2%80%8D%F0%9F%91%A7%E2%80%8D%F0%9F%91%A6","%F0%9F%91%A8%E2%80%8D%F0%9F%91%A8%E2%80%8D%F0%9F%91%A6%E2%80%8D%F0%9F%91%A6","%F0%9F%91%9A","%F0%9F%91%95","%F0%9F%91%96","%F0%9F%91%94","%F0%9F%91%97","%F0%9F%91%99","%F0%9F%91%98","%F0%9F%92%84","%F0%9F%92%8B","%F0%9F%91%A3","%F0%9F%91%A0","%F0%9F%91%A1","%F0%9F%91%A2","%F0%9F%91%9E","%F0%9F%91%9F","%F0%9F%91%92","%F0%9F%8E%A9","%F0%9F%8E%93","%F0%9F%91%91","%E2%9B%91","%F0%9F%8E%92","%F0%9F%91%9D","%F0%9F%91%9B","%F0%9F%91%9C","%F0%9F%92%BC","%F0%9F%91%93","%F0%9F%95%B6","%F0%9F%92%8D","%F0%9F%8C%82"]
		emojiArr: ['😀','😬','😁','😂','😃','😄','😅','😆','😇','😉','😊','🙂','🙃','☺️','😋','😌','😍','😘','😗','😙','😚','😜','😝','😛','🤑','🤓','😎','🤗','😏','😶','😐','😑','😒','🙄','🤔','😳','😞','😟','😠','😡','😔','😕','🙁','☹️','😣','😖','😫','😩','😤','😮','😱','😨','😰','😯','😦','😧','😢','😥','😪','😓','😭','😵','😲','🤐','😷','🤒','🤕','😴','💤','💩','😈','👿','👹','👺','💀','👻','👽','🤖','😺','😸','😹','😻','😼','😽','🙀','😿','😾','🙌','👏','👋','👍','👎','👊','✊','✌️','👌','✋','👐','💪','🙏','☝️','👆','👇','👈','👉','🖕','🖐','🤘','🖖','✍','💅','👄','👅','👂','👃','👁','👀','👤','👥','🗣','👶','👦','👧','👨','👩','👱','👴','👵','👲','👳','👮','👷','💂','🕵','🎅','👼','👸','👰','🚶','🏃','💃','👯','👫','👬','👭','🙇','💁','🙅','🙆','🙋','🙎','🙍','💇','💆','💑','👩‍❤️‍👩','👨‍❤️‍👨','💏','👩‍❤️‍💋‍👩','👨‍❤️‍💋‍👨','👪','👨‍👩‍👧','👨‍👩‍👧‍👦','👨‍👩‍👦‍👦','👨‍👩‍👧‍👧','👩‍👩‍👦','👩‍👩‍👧','👩‍👩‍👧‍👦','👩‍👩‍👦‍👦','👩‍👩‍👧‍👧','👨‍👨‍👦','👨‍👨‍👧','👨‍👨‍👧‍👦','👨‍👨‍👦‍👦','👚','👕','👖','👔','👗','👙','👘','💄','💋','👣','👠','👡','👢','👞','👟','👒','🎩','🎓','👑','⛑','🎒','👝','👛','👜','💼','👓','🕶','💍','🌂']
	},
	methods: {
		replaceEm: function (str) {
			return str.replace(/\[em_([0-9]*)\]/g,'<img src="' + emojiLocation + '$1.gif">');
		}
	},
	computed: {
		
	},
	components: {
		
	},
	created: function () {
		var _this = this;
		/******************* 载入聊天人员信息 *******************/
		getData(_this.num);
	},
	mounted: function () {
		var _this = this,
			$chatBox = $('html body .wrap .activity-chat');

		$('html body .wrap .activity-chat .chat .msg-box').on('tap', '.msg-con .other img', function () {
			core.href(userDetailUrl + '?user_id=' + faId + '&from=1');
		});

		$('html body .wrap .activity-chat .chat .msg-box').on('tap', '.msg-con .self img', function () {
			core.href(userDetailUrl + '?user_id=' + shouId + '&from=1');
		});

		// 处理iOS
		// var isIOS=(/iphone|ipad/gi).test(navigator.appVersion);
		// if (isIOS) {
			$input.on('focus', function () {
				isFocus = true;
				$footer.css('position', 'relative');
				$chatBox.css('paddingBottom', '0rem');
				if ($emojiBtn.hasClass('active')) {
					$emojis.removeClass('active');
					$footer.removeClass('active');
					$emojiBtn.removeClass('active');
					$chat.css('paddingBottom', '0');
				}
				setTimeout(function () {
					$window.scrollTop($('html body .wrap > article').height() + $footer.height());
				}, 250);
			}).on('focusout', function () {
				isFocus = false;
				$chatBox.css('paddingBottom', '4rem');
				$footer.css('position', 'fixed');
			});
		// }

		/******************* 载入表情包 *******************/
		// RongIMLib.RongIMEmoji.init();
		// emojis = RongIMLib.RongIMEmoji.emojis;

		// $('html body .wrap .activity-chat .emojis-window .emojis-con').append(emojis);
		// $emoji = $('html body .wrap .activity-chat .emojis-window .emojis-con').children();
		// $('html body .wrap .activity-chat .emojis-window .emojis-con span span').css({
		// 	width: '3.2rem',
		// 	height: '3.2rem',
		// 	fontSize: '2rem !important',
		// 	lineHeight: '3.2rem'
		// });

		// var emojiStr = '';
		// for (var i = 1; i < 76; i++) {
		// 	emojiStr += '<img src="' + emojiLocation + i + '.gif' + '" alt="" title="">';
		// }
		// $('html body .wrap .activity-chat .emojis-window .emojis-con').html(emojiStr).on('tap', 'img', function () {
		// 	$input.val($input.val() + '[em_' + ($(this).index() + 1) + ']');
		// });

		// //转换文字为img标签
		// function replaceEm(str){
		// 	return str.replace(/\[em_([0-9]*)\]/g,'<img src="' + emojiLocation + '$1.gif">');
		// }

		/******************* 表情功能 *******************/
		// 打开表情
		$chat = $('html body .wrap .activity-chat .chat'),
		$emojis = $('html body .wrap .activity-chat .emojis-window'),
		$emojiBtn = $('html body .chat-footer div span');
		$emojiBtn.on('tap', function () {
			var $this = $(this),
				chatHeight = $chat.height();
			// if (!isFocus) {
				if ($this.hasClass('active')) {
					$emojis.removeClass('active');
					$footer.removeClass('active');
					$this.removeClass('active');
					$chat.css('paddingBottom', '0');
					$input.focus();
				} else {
					if (chatHeight > notConHeight) {
						$chat.css('paddingBottom', emojisHeight + 'px');
					}
					$emojis.addClass('active');
					$footer.addClass('active');
					$this.addClass('active');
					$input.blur();
				}
				!isFocus && $window.scrollTop($('html body .wrap > article').height() - $window.height());
			// }
		});

		// 关闭表情弹窗
		$('body').on('touchstart', 'html body .header-title, html body .wrap .activity-chat .chat', function () {
			$input.blur();
			if ($emojiBtn.hasClass('active')) {
				$emojis.removeClass('active');
				$footer.removeClass('active');
				$emojiBtn.removeClass('active');
				$chat.css('paddingBottom', '0');
			}
			// !isFocus && $window.scrollTop($('html body .wrap > article').height() - $window.height());
		});

		// 选择表情
		// $emoji.on('click', function () {
		// 	var $this = $(this);
		// 	$input.val(RongIMLib.RongIMEmoji.symbolToEmoji($input.val() + $this.children().attr('name')));
		// });

		$emojis.on('tap', 'span', function () {
			$input.val($input.val() + $(this).html());
		});

		/******************* 下拉加载数据 *******************/
		$window.on('scroll', function() {
			if (_this.num != 1) {
				if ($window.scrollTop() < (4 * rem) && _this.loadJudge) {
					if (!_this.loadingJudge) {
						_this.isLoading = true;
						_this.loadingJudge = true;
						getData(_this.num);
					}
				}
			}
		});

		/******************* 点击发送按钮 *******************/
		$('html body .chat-footer div strong').on('tap', function () {
			$input.val($.trim($input.val()));
			if (vm.is_friend == 0) {
				core.layerHint('你们已解除玩伴关系，无法再联系哦~');
			} else {
				if ($input.val() == '') {
					core.layerHint('发送消息不可为空');
				} else {
					valTmp = $input.val();
					$input.val('');
					message(vm.userOther.id, encodeURIComponent(valTmp));
				}
			}
			// console.log(RongIMLib.RongIMEmoji.emojiToHTML($input.val()));
			// console.log(RongIMLib.RongIMEmoji.emojiToSymbol($input.val()));
		});

		$input.on('keydown', function (event) {
			if (event.keyCode == 13) {
				if (vm.is_friend == 0) {
					core.layerHint('你们已解除玩伴关系，无法再联系哦~');
				} else {
					if ($input.val() == '') {
						core.layerHint('发送消息不可为空');
					} else {
						valTmp = $input.val();
						$input.val('');
						message(vm.userOther.id, encodeURIComponent(valTmp));
					}
				}
			}
		});
	},
	updated: function () {
		if (!this.isLoading) {
			// alert('!isLoading')
			// alert($('html body .wrap > article').height() - $window.height() + $footer.height())
			isFocus ? $window.scrollTop($('html body .wrap > article').height() - $window.height() + $footer.height()) : $window.scrollTop($('html body .wrap > article').height() - $window.height());
		} else {
			// alert('isLoading')
			$window.scrollTop(4 * rem);
		}
	}
});

/******************* 载入聊天列表 *******************/
// $.ajax({
// 	url: msgDetailUrl,
// 	type: 'post',
// 	data: {
// 		// user_id: userId
// 	},
// 	success: function(data) {
// 		console.log(data)

		
// 	}
// });

// 发送消息方法，需要补充与后台对接方法
function sendMsg(msg, time) {
	vm.isLoading = false;
	var date = (time ? core.dateDetail(time) : '');
	vm.list.push({
		is_zuoyou: 'wo',
		content: decodeURIComponent(msg),
		add_time: (date ? (date.ymd2 + ' ' + date.hour + ':' + date.min) : ''),
		url: 0
	});
	// $chat.append('<div class="msg-con"><h3>' + date.ymd2 + ' ' + date.hour + ':' + date.min + '</h3><div class="self clearfix"><img src="' + userSelf.image + '" alt="" title=""><div class="con"><p>' + replaceEm(msg) + '</p></div></div></div>');
	if (isFocus) {
		$window.scrollTop($('html body .wrap > article').height() + $footer.height());
	} else {
		$window.scrollTop($('html body .wrap > article').height() - $window.height());
	}
}

// 接收消息方法，传入参数为对方聊天信息（字符串），需要补充与后台对接方法
function getMsg(msg, time, url) {
	if (getRong) {
		vm.isLoading = false;
		var date = (time ? core.dateDetail(time) : '');
		vm.list.push({
			is_zuoyou: 'ta',
			content: decodeURIComponent(msg),
			add_time: (date ? (date.ymd2 + ' ' + date.hour + ':' + date.min) : ''),
			url: 0
		});
		// $chat.append('<div class="msg-con"><h3>' + date.ymd2 + ' ' + date.hour + ':' + date.min + '</h3><div class="other clearfix"><img src="' + userOther.image + '" alt="" title=""><div class="con"><p>' + replaceEm(msg) + '</p>' + ((url != 0) ? '<a href="' + url + '" title="">点击查看</a>' : '') + '</div></div></div>');
		if (isFocus) {
			$window.scrollTop($('html body .wrap > article').height() + $footer.height());
		} else {
			$window.scrollTop($('html body .wrap > article').height() - $window.height());
		}
	}
}

// 添加时间，传入参数为时间（字符串），需要补充与后台对接方法
function addTime(str) {
	$chat.append('<h3>' + str + '</h3>');
}

// 消息发送失败，传入标签为.chat下的DIV标签
function sendFail(ele) {
	$ele.addClass('delay');
}

// 消息发送失败标识去除，传入标签为.chat下的DIV标签
function removeFail(ele) {
	$ele.removeClass('delay');
}

// 如果需要提示语调用这个
// core.layerHint('提示语');
